6
תגובות

FRONT END FRAMEWORKS - למה וכמה ?

פתח משהה ,
התחלתי להתעניין לאחרונה בחוויית המשתמש באיך הוא רואה את האתר את הנגישות שלו לחלקי האתר הצבעים וכל שאר הדברים.
הבנתי שיש פריימוורקים פרונט אנד, כמו בוסטרפ והתחלתי להתעניין ולחפש עוד וראיתי באמת עבודות יפות .

1. האם כדאי להשתמש בפריימוורקים האלה? או פשוט כדאי לכתוב CSS /JS בעצמי עם שימוש בJQ או אפילו JQ UI ?

2. האם אפשר להשתמש ביותר מ1, בו זמנית? אני מתכוון האם זה תקין ? לא מבזבז הרבה משאבים ? או שזה בזבוז? כי ראיתי כמה רעיונות בכל פריימוורק שנראים לי טוב ביחד נגיד פעם אחת להשתמש ככה ופעם אחרת ככה

6 תשובות

avatar ענה intval ב 27 לאוקטובר 2014 #

המטרה של פריימוורק היא לחסוך לך הרבה עבודה
1. לכן לדעתי רצוי שתשתמש באחד, אבל כמובן שתוכל גם לכתוב הכל בעצמך אם מאוד בא לך.

2. אפשר להשתמש ביותר מאחד, אך ברוב המקרים, יש חפיפה של 80% בין מה ששני פריימוורקים שונים מציאים
לכן תקבל 80% אקסטרה טעינת משאבים שלא היית צריך. לא קריטי, אבל בדרך כלל מספיק אחד.
וכמובן שעדיף ללמוד להשתמש באחד בצורה טובה מאשר ללמוד שני פריימוורקים חצי-חצי.

הטענה קצת שונה למקרה שאתה משתמש בפריימוורק ובעוד ספריות נוספות שמוסיפות ומרחיבות אותו. כאן אין לך משאבים אקסטרה, אלא רק אלה שאתה בחרת להוסיף

avatar ענה Splash ב 27 לאוקטובר 2014 #

זה הכל עניין של איך אתה מגיש אותם,רוב הפרימוורקים שוקלים בסביבות ה- 100 קילובייט שזה לא מעט,אבל במידה ואתה מבצע gzip+מטמון אז זה כבר ניהיה פחות נורא כי הם נטענים רק פעם אחת ואז כבר אין צורך לטעון אותם שוב עד שאתה לא משנה גירסא.
יש כמה פרימוורקים שכן ניתן לשלב אותם ולמעשה כל אחד דואג למשהו אחר כמו angular+jquery או כמו שאתה ציינת jquery+jquery ui.
הייתי אומר שזה מאוד משתנה בין האתרים ולפני שאתה ישר כולל פרימוורק מסויים אתה צריך לחשוב כמה באמת אותו פרימוורק הולך לתרום לך מול כמה הוא יפגע בך.
אם יש לך כמה אנימציות בודדות באתר,אין טעם לכלול ספריה שלמה ועדיף לכתוב משהו שמיועד לצרכים שלך.

עוד דבר שבכללי צריך לזכור זה לא לבסס את כל האתר על js אחרת אתה תיהיה מחוייב לטעון אותם בתחילת העמוד והדפדפן לא יכול לבצע רינדור של ה dom עד שהוא לא מסיים לקרוא את הקבצי js דבר שמאוד יפגע בביצועים כאשר מדובר בכמה ספריות ,במיוחד כאשר מדובר במשתמשים בעלי קישוריות נמוכה.

avatar ענה משהה ב 27 לאוקטובר 2014 #

1.התכוונתי יותר בקטע של הCSS של הפריימוורקים לא של הJS, העיצוב של הכפתורים הINPUTים הטבלאות והכול כי הJQ מספיק לי, לפחות בנתיים. יהיה אפשר להשתמש רק בCSS?
2.לכתוב אחד זה קשה מאתגר כזה? או שזה פשוט כתיבת קוד ובזבוז זמן ?
3.למה הכוונה בלא לבסס?
אני יגיד לך על מה חשבתי :
לקבל מPHP מערכים/אובייקטים/כל דבר לJS, ואז JS כבר יעצב לי את זה בהתאם למה שצריך.
נגיד JS קיבל מPHP מערך UserDetails אז תופעל פונקציה שתכניס את כל הערכים במקום המתאים להם בדף. בקיצור, במקום לכתוב תגי HTML בPHP - ניתן לJS לעשות את זה .
לזה התכוונת שלא כדאי לעשות ? או למשהו אחר?

avatar ענה Splash ב 27 לאוקטובר 2014 #

1.יש לך כלים כמו gulp,grunt שיודעים להוציא מה css רק את מה שאתה באמת משתמש בוא,ה bootstrap מאוד עמוס בהמון אובייקטים שאתה לא בהכרח משתמש בהם וזה סתם מכביד על ה css.

2.מה זה לכתוב אחד כזה ? media query ? זה לא כזה מורכב,צריך לדעת לעבוד עם זה ועם הניסיון זה כבר יהיה יותר קל. כמו כל דבר.

3.ברגע שאתה עובד בצורה הזאת,כל משתמש שלא מאפשר js לא יוכל לטעון את האתר שלך,לא כזה מומלץ.
הדרך היותר נכונה תיהיה לטעון הכל מבחינת טקסט בתור html רגיל ורק כאשר האדם לוחץ על הקישור אז יטען ajax במידה והמשתמש מאפשר זאת אחרת זה יעביר אותו לעמוד שיטען עוד פעם את ה html השלם.
angular היא דוגמא טובה למה שאתה שאתה מנסה לעשות והייתי מציע לך להסתכל על המימוש שם.יכול לחסוך לך המון עבודה מבחינת הקריאה ל ajax וגם מבחינת להכין את הטמפלט.

מה שאני התכוונתי אבל לא קשור לזה,אני מציע לך להסתכל על הקישור הנ"ל - https://developers.google.com/speed/docs/insights/BlockingJS
כדי להבין יותר.
ברגע שהאתר שלך מבוסס על js מבחינת מיקום של דברים \ דברים קריטים לא יעבדו ללא ה js אתה חייב לשים אותו בתחילת ה body\header במקרה כזה הדפדפן לא יכול לקרוא את ה dom משום שהוא צריך להוריד קודם כל את ה script,לפענח אותו ורק אז הוא יכול לחזור ל dom,במקרה של כמה שורות בודדות של js לא יהיה מדובר בשגיאה קריטית מידי,אבל ברגע שיש לך ספרייה ועוד כל מיני קריאות ajax זה מאוד פוגע בביצועים מבחינת הזמן טעינה של האתר.

avatar ענה משהה ב 27 לאוקטובר 2014 #

1+2. תודה רבה :) אני כנראה ינסה לכתוב אחד משלי ויקח רעיונות מפריימוורקים אחרים.
3. אבל איזה משתמש לא מאפשר JS ? כל הדפדפנים תומכים בזה לא?
ואיך אני טוען הכל בתור HTML רגיל כשאני רוצה נגיד לעשות שפות באתר לדוגמה שהוא יפעל גם בעברית וגם באנגלית ואז אני יוצר קובץ XML או JSON וקורא משם ?
והתכוונת פשוט לא לסמוך על JS יותר מדי ?

avatar ענה Splash ב 27 לאוקטובר 2014 #

3.כן,בכל דפדפן יש js אבל יש אנשים שלא נותנים לו לרוץ - חלק באתרים ספציפים וחלק בכל האתרים.
לגבי השפות,למה אתה עושה את השפה ב js ולא בצד שרת ?
ובכללי לא הבנתי מה ניסית לרשום,הכוונה שלי ב html "מלא" זה שלא תשלח חלקים חשובים מהאתר ב ajax אלה שברגע שמישהו נכנס לכתובת כמו
www.mydomain.com/important.php
אז אתה טוען לו את כל הדברים החשובים באותה בקשה ללא ajax,ואם משם הוא מנסה לגשת למשל ל important2
אז אתה בודק אם יש לו js,אם לא תפנה אותו ל
www.mydomain.com/important2.php
ואם כן אז תשלח בקשת ajax לאותו עמוד ותחזיר רק json עם הנתונים שצריך.

ולא אמרתי שלא תסמוך על js ,להפך,js זה מאוד חשוב על מנת לספק למשתמשים חוויה אחרת שלא מסתכמת רק בטקסט ורקע,אפשר להזיז דברים,לעשות אנימציות וכו' מה שאני כן אומר זה תדאג שהאתר ידע לתפקד גם בלי js.
כך אתה גם מאפשר למשתמשים שלא מריצים js לגלוש וגם לא דורש מעצמך לטעון את הקבצי js בהתחלה אלה אפשר לטעון אותם גם מהאמצע\בסוף ובכך לאפשר רינדור מהיר של ה dom.
אפשר גם להשתמש ב async כדי לא למנוע הפרעה לרינדור הבעיה היא ששימוש לא נכון יכול לגרום לתוצאות לא צפויות,אני מציע לך לקרוא טיפה חומר בלינק שנתתי,אם אני לא טועה יש שם הסברים גם על הטעינה של css